<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <style>
        #one{
            width: 600px;
            height: 400px;
            border: 1px solid palegoldenrod;
            position:relative;

        }
        #two{
            width: 60px;
            height: 40px;
       background-color: papayawhip;
             position:absolute;
             animation: donghua 4s linear both;
             /*animatiom本身就有动画的意思*/
             animation-fill-mode: forwards;
             /*让元素停留在结束的状态  backwards 回到初始状态
             both位置先在开始状态，结束在结束状态*/
             animation-iteration-count: 3;
             /*infinite 无限循环*/
        }
        /*定义动画。描述动画过程@keyframes 后面跟这个过程名字*/
        @-moz-keyframes donghua
        /*也可以使用from{}to{}这样的简单些opacity 设置为1对象消失设置为零出现，@-moz-keyframes里面写的是0然后1.在给对象设置参数里写的是0*/
        {
         0%{
             top:0px;
             left: 0px;
            background-color:  papayawhip;
         }
         20%{
             top:0px;
             left:128 px;
             background-color: red;
         }
         30%{top:0px;
             left: 256px;
              background-color: yellow;}
         40%{
             top:0px;
             left: 384px;
              background-color:green;
         }
         50%{top:0px;
             left: 512px;
             background-color: black ; }
         60%{top:0px;
             left: 640px;
                 background-color: pink ; }
         70%{top:0px;
             left: 640px;
                 background-color:  fuchsia; }
         80%{top:120px;
             left: 640px;
                 background-color:  honeydew; }
         90%{top:240px;
             left: 640px;
                 background-color: firebrick ; }
        100%{top:360px;
             left: 640px;
                 background-color:olivedrab  ; }
         
        }
        
    </style>
</head>
<body>
    <div id="one">
        <div id="two"></div>
    </div>
</body>
</html>